import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';

import { SectionAlternate } from 'components/organisms';

import {
    Faq,
} from './components';

const useStyles = makeStyles(theme => ({
    root: {
        height: '100%',
        width: '100%',
    },
    sectionAlternate: {
        background: 'transparent',
        backgroundImage: `linear-gradient(180deg, ${theme.palette.background.paper} 400px, ${theme.palette.primary.dark} 0%)`,
    },
}));

const FAQ = () => {
    const classes = useStyles();
    const [faqList, setFaqList] = useState([]);

    useEffect(() => {
        getServerSideProps()
    }, [])

    const getServerSideProps = async () => {
        // Fetch data from external API
        console.log("api_url", process.env.NEXT_PUBLIC_ASE_API_URL);
        const res = await fetch('https://crd.crowdded.com/api/user/faqs')
        const data = await res.json()
        console.log(data)
        setFaqList(data.data);
        // Pass data to the page via props
    }

    return (
        <div className={classes.root}>
            <SectionAlternate className={classes.sectionAlternate}>
                <Faq data={faqList} />
            </SectionAlternate>
        </div>
    );
};

export default FAQ;